import React, { Component } from 'react'
import { Link, HashRouter as Router } from 'react-router-dom'
import { Modal, BackTop, message } from 'antd'
import './style.scss'
import DialogTable from '@pages/common/dialogTable'
import { getFood } from '@net/good/info'
import { column } from './config'

interface IProps { }
interface IStates {
    num: number,
    seaModal: boolean,
    diaTabData: any[],
    aboutModal: boolean
}
export default class FrontDesk extends Component<IProps, IStates> {
    constructor(props: IProps) {
        super(props)
        this.state = {
            num: 1,
            seaModal: false,
            aboutModal: false,
            diaTabData: []
        }
    }
    public click = (item: number) => {
        this.setState({ num: item })
        if (item === 2) {
            this.setState({ seaModal: true })
        }
        if (item === 3) {
            this.setState({ aboutModal: true })
        }
    }
    // 关闭
    public close = (item: number) => {
        if (item === 2) {
            this.setState({ seaModal: false })
        }
        if (item === 3) {
            this.setState({ aboutModal: false })
        }
    }
    public diaSearch = async (code: any) => {
        if (code === undefined) {
            message.warn({ content: "请输入追溯码！", style: { marginTop: "20%" } })
        } else {
            const res = await getFood(code)
            const { status, msg, data } = res.data
            if (status === 203) {
                message.error({ content: msg, style: { marginTop: "20%" } })
            } else {
                message.success({ content: msg, style: { marginTop: "20%" } })
                data.forEach((item:any,index:number) => {
                    item.Id = index
                })
                this.setState({ diaTabData: data })
            }
        }
    }
    public render() {
        const { num, seaModal, diaTabData, aboutModal } = this.state
        return (
            <Router>
                <div className='front_body' id="content">
                    <div className='front_body_header'>
                        <div className='header_title'>
                            食品溯源平台
                    </div>
                        <div className='header_control'>
                            <div className={num === 1 ? "header_click" : "header_mo"} onClick={() => { this.click(1) }}>首页</div>
                            <div className={num === 2 ? "header_click" : "header_mo"} onClick={() => { this.click(2) }}>追溯查询</div>
                            <div className={num === 3 ? "header_click" : "header_mo"} onClick={() => { this.click(3) }}>关于我们</div>
                            <div style={{ display: "inline-block" }}><Link to='/login.html'>工作台</Link></div>
                        </div>
                    </div>
                    <div className='front_body_content_f'></div>
                    <div className='front_body_content_s'></div>
                    <div className='front_body_content_t'></div>
                    <div className='front_body_content_fo'></div>
                    <Modal
                        visible={seaModal}
                        title="溯源查询"
                        width="1100px"
                        onCancel={() => { this.close(2) }}
                        footer={null}>
                        <DialogTable
                            label="溯源码"
                            placeholder="请输入食品溯源码"
                            columns={column()}
                            dataSource={diaTabData}
                            scroll={{ x: 6000 }}
                            search={this.diaSearch}>
                        </DialogTable>
                    </Modal>
                    <Modal
                        visible={aboutModal}
                        title="关于我们"
                        width="1100px"
                        onCancel={() => { this.close(3) }}
                        footer={null}>
                        <div className="about">
                            <h1>食品溯源</h1>
                            <div>
                                <p>1.溯源流程的透明性：每一个食品供应链成员都参与，对每一个关键环节信息公开化、透明化.</p>
                                <p>2.溯源层次的多样性：对一个国家、一个地区、一家企业直至一个具体的生产经营环节进行溯源；从产品层次上，食品溯源系统可以对一种产品、一个批次、一个产品直至一个具体的原材料进行溯源。</p>
                                <p>3.溯源信息的标准性：实现对溯源信息采集、加工、传输和应用的标准化，食品供应链成员之间、食品供应链之间实现了信息的共享与交流。</p>
                                <p>4.溯源数据的保密性:注重加强对食品供应链成员产品配方、销售统计等商业机密信息的保护，以提高食品溯源数据的保密性。</p>
                                <p>5.溯源数据的及时性:通过借助Internet环境快速定位问题食品危及的范围、及时发布风险信息、立即开展食品召回工作，有效地防止问题食品的扩散，保障消费者的健康不受到威胁。</p>
                                <p>食品溯源系统帮助企业提升了产品品牌的形象，增加了消费者对企业的信赖；如果您也需要搭建食品溯源系统，欢迎来咨询,我们将为您带来一站式的服务。</p>
                                <p className="about_footer">联系方式：QQ：1563537197&nbsp;&nbsp;系统管理员QQ：1563537197</p>
                            </div>
                        </div>
                    </Modal>
                </div>
                <BackTop target={() => document.getElementById("content") as any} />
            </Router>
        )
    }
}